<template>
  <el-dialog
    class="dialog"
    :destroy-on-close="true"
    title="门禁指令"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    @close="onDialogClose"
  >
    <el-form
      ref="form"
      label-width="auto"
      class="form"
      :model="formData"
      :rules="rules"
    >
      <el-form-item label="门禁名称">
        <div style="display: flex; justify-content: space-between">
          <span>{{ infoData.door_name }}({{ infoData.door_guid }})</span>
          <span>{{ formData.door_status == 1 ? "在线" : "离线" }}</span>
        </div>
      </el-form-item>
      <el-form-item label=" 操作指令" prop="cmd_type">
        <el-select
          v-model="formData.cmd_type"
          placeholder="请选择操作指令"
          @change="cmdChange"
        >
          <el-option
            v-for="item in cmdListData"
            :key="item.cmd_code"
            :label="item.cmd_name"
            :value="item.cmd_code"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="二维码"
        prop="qr_type"
        v-if="formData.cmd_type == 'confqr'"
      >
        <el-select
          v-model="formData.qr_type"
          placeholder="请选择操作指令"
          @change="qrTypeChange"
        >
          <el-option
            v-for="item in qrTypeListData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="公共密码" v-if="['pwd'].includes(formData.cmd_type)">
        <el-input v-model="formData.param1"></el-input>
      </el-form-item>
      <el-form-item
        label="内容"
        v-if="formData.qr_type == '2' && formData.cmd_type == 'confqr'"
      >
        <el-input v-model="formData.param1"></el-input>
      </el-form-item>
      <!-- 显示指令对应的二维码 -->
      <el-form-item prop="qr_str" v-if="qr_str !== ''">
        <vue-qr
          ref="qrcode"
          colorLight="#fff"
          :text="qr_str"
          :margin="0"
          :logoScale="0.3"
          :size="300"
        ></vue-qr>
      </el-form-item>
      <div v-if="formData.cmd_type == 'upgrade'">
        <el-form-item label="版本号" prop="param1">
          <el-input v-model="formData.param1"></el-input>
        </el-form-item>
        <el-form-item label="升级文件" prop="param2">
          <div style="display: flex">
            <el-input
              v-model="formData.param2"
              @blur="
                () => {
                  validateField('');
                }
              "
            ></el-input>
            <uxUpload
              v-model="formData.param2"
              dir="upgrade"
              :isPic="false"
              @validateField="validateField"
            ></uxUpload>
          </div>
          <p class="el-form-item__error filtErr">{{ filtErr }}</p>
        </el-form-item>
        <el-form-item label="文件md5码" prop="param3">
          <el-input v-model="formData.param3"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onDialogClose">取消</el-button>
      <el-button
        type="primary"
        @click="confQrMethod"
        :disabled="qr_button_disabled"
        v-if="qr_button == 1 && ['xsj'].includes(formData.door_gyscode)"
        >生成配置码</el-button
      >
      <!-- v-if="formData.door_status == 1" -->
      <el-button
        type="primary"
        v-if="formData.door_status == 1"
        @click="onSubmit"
        >下发指令</el-button
      >
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import vueQr from "vue-qr";
import { Action } from "vuex-class";
import { mixinDialogForm } from "@/mixin/dialog/Form";
import uxUpload from "@/components/input/upload/file2.vue";
@Component({
  mixins: [mixinDialogForm],
  components: {
    vueQr,
    uxUpload,
  },
})
export default class equipmentDoorYardOperation extends Vue {
  @Action("equipmentDoor/remote") itemEdit: any;
  @Action("equipmentDoor/cmdList") cmdList: any;
  @Action("equipmentDoor/confQr") confQr: any;
  qr_str: any = "";
  qr_button: any = 2;
  qr_button_disabled = false;
  editInit(data: any) {
    this.remoteMethod(data.door_sn);
    this.formData.door_sn = data.door_sn;
    this.formData.yard_sn = data.yard_sn;
    this.formData.door_gyscode = data.door_gyscode;
    this.formData.door_status = data.door_status;
    this.formData.qrcode_str = data.qrcode_str;
    this.formData.param1 = "";
    this.formData.param2 = "";
    this.formData.qr_type = "";
    this.qr_str = "";
    this.qr_button = 2;
  }

  cmdListData: any = [];
  remoteMethod(door_sn) {
    const me = this as any;
    me.cmdList({ door_sn: door_sn, manage: 2 }).then(({ data }) => {
      me.cmdListData = data;
    });
  }

  cmdChange() {
    const me = this as any;
    me.qr_str = "";
    me.qr_button_disabled = false;
    me.formData.param1 =
      me.formData.cmd_type == "confqr" ? me.formData.qrcode_str : "";
    console.log(me);

    if (
      ["open", "erase", "doorResend", "retime", "confqr", "upgrade"].includes(
        me.formData.cmd_type
      )
    ) {
      me.qr_button = 2;
    } else {
      me.qr_button = 1;
    }
  }
  qrTypeListData: any = [
    { label: "自助注册码", value: "1" },
    { label: "自定义内容", value: "2" },
  ];
  // 二维码内容下发
  qrTypeChange() {
    const me = this as any;
    me.formData.param1 =
      me.formData.qr_type == "1"
        ? "https://userapp.park.hy-access.com/holderin/?yard_sn=" +
          me.formData.yard_sn
        : "";
  }

  // 供线下门禁识别的二维码
  confQrMethod() {
    const me = this as any;
    me.qr_button_disabled = true;
    me.confQr(me.formData).then(({ data }) => {
      me.qr_str = data.str;
    });
  }

  filtErr: string = "";
  validateField(string) {
    // const me = this as any;
    this.filtErr = string;
  }

  // 表单数据
  formData: any = {
    door_sn: "",
    cmd_type: "",
    yard_sn: "",
    param1: "",
    param2: "",
    param3: "",
    door_status: "",
    qr_type: "",
    getconf: "",
    door_gyscode: "",
    qrcode_str: "",
  };

  /**
   * 校验配置
   *
   * @type {*}
   * @memberof mixinViewRules
   */
  rules: any = {
    cmd_type: [
      {
        required: true,
        message: "请选择操作指令",
      },
    ],
    door_sn: [
      {
        required: true,
        message: "请选择门禁",
      },
    ],
    qr_type: [
      {
        required: true,
        message: "请选择二维码",
      },
    ],
    param1: [
      {
        required: true,
        message: "请输入",
      },
    ],
    param2: [
      {
        required: true,
        message: "请选择",
      },
    ],
    param3: [
      {
        required: true,
        message: "请输入",
      },
    ],
  };
}
</script>
